<template>
  <el-table :data="filterTableData" style="width: 100%;height: 870px;">
    <el-table-column label="id" prop="id" />
    <el-table-column label="标题" prop="title" />
    <el-table-column label="内容">
      <template #default="scope">
          {{ (scope.row.content).slice(0,20)+"....."}}
      </template>

    </el-table-column>
    <el-table-column label="发布时间" prop="createTime" />
    <el-table-column label="状态" >
      <template #default="scope">
            <el-tag :type="scope.row.status===0 ?'success':'info'">
              {{ scope.row.status===0 ? '已发布': '草稿' }}
            </el-tag>
      </template>


    </el-table-column>




    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-popconfirm title="你确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
          <template #reference>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="编辑文章️🏷️" >

    <el-form :model="ArticleForm">
      <div class="box" style="width: 100%;height: 100%;display: flex;flex-direction: column;">

          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="ArticleForm.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input v-model="ArticleForm.content" autocomplete="off" :rows="10" type="textarea"/>
          </el-form-item>
          <el-form-item label="发布时间" :label-width="formLabelWidth">
            <el-input v-model="ArticleForm.createTime" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input v-model="ArticleForm.status" autocomplete="off" />
            </el-form-item>
      </div>

    </el-form>
    <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="confrimEdit">
                确认更改
              </el-button>
            </span>
    </template>

  </el-dialog>

</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import {
  deleteDoctorById,
  getDoctors,
  editDoctor,
  getAllArticles,
  deleteArticleById,
  ModifyArticle
} from '../../api/user.js';
import dayjs from "dayjs"
interface Article {
  id: string
  title: string
  content: string
  createTime: string
  updateTime: string
  status: string

}


onMounted(() => {
  getAllArticles().then(res => {
    console.log(res.data);
    res.data.data.forEach(item => {
      //@ts-ignore
      item.createTime = Math.floor(item.createTime / 1000)
      //@ts-ignore
      item.createTime = dayjs.unix(item.createTime).format('YYYY-MM-DD')


    })
    article.value = res.data.data

  })

})
const data = reactive({
  article: [] as Article[],
  dialogFormVisible: false,

})
const formLabelWidth = ref('140px')

let ArticleForm: Article = reactive({
  id: "",
  title: "",
  content:"",
  createTime:"",
  updateTime: "",
  status: "",

})

let { article, dialogFormVisible } = toRefs(data)

const search = ref('')
let filterTableData = computed(() =>
    article.value.filter(
        (data) =>
            !search.value ||
            data.title.toLowerCase().includes(search.value.toLowerCase())
    )
)

const handleEdit = (index: number, row: Article) => {
  dialogFormVisible.value = true
  Object.assign(ArticleForm, row);

}
const handleDelete = async (index: number, row: Article) => {
  console.log(index, row)
  try {
    const res = await deleteArticleById(row.id)
    if (res.data.code == 200 && index !== -1) {
      article.value.splice(index, 1); // 删除行
      article.value = [...article.value]; // 更新数据源
    }
  } catch (error) {
    console.error(error);
  }
}

async function confrimEdit() {
  const res = await ModifyArticle(ArticleForm)
  if (res.data.code == 200) {
    dialogFormVisible.value = false
    location.reload();

  }
}

</script>